<template>
  <div class="header_right">
    <div class="header-avatar" style="cursor: pointer">
      <span class="name">{{fullName}}</span>
    </div>
    <a-dropdown>
      <div class="header_right_switch">
        <img src="@/assets/img/icon_user.png" alt="">
        {{ platformName }}<span></span>
      </div>
      <a-menu :class="['avatar-menu']" slot="overlay" :default-selected-keys="currentDataScopeExplain">
  <!--      <a-menu-item >-->
  <!--        <a-icon type="user" />-->
  <!--        <span>个人中心</span>-->
  <!--      </a-menu-item>-->
  <!--      <a-menu-item  @click="toMyInfo">-->
  <!--        <a-icon type="setting" />-->
  <!--        <span>设置</span>-->
  <!--      </a-menu-item>-->
  <!--      <a-menu-divider />-->
        <a-menu-item v-for="item in dataScope" :key="item.dictKey" @click="switchPlatform(item.dictKey,item.dictValue)">
          <a-icon type="user" />
          <span>{{item.dictValue}}</span>
        </a-menu-item>
        <a-menu-item @click="logout">
          <a-icon style="margin-right: 8px;" type="poweroff" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {getUserDetail} from '@/services/system/whdngxlApi'
import {logout} from "@/services/system/api"

export default {
  name: 'HeaderAvatar',
  computed: {
    ...mapGetters(['fullName','avatar'])
  },
  data(){
    return {
      dataScope: [],
      currentDataScopeExplain: [],
      platformName: null
    }
  },
  methods: {
    ...mapActions(['Logout','setMenuData']),
    logout() {
      this.Logout().then(()=>{
        this.setMenuData()
      }).catch().finally(()=>{const { $router } = this;

          $router.replace({ name: 'login' });});
    },
    toMyInfo() {
      this.$router.push({ name: 'settings' });
    },
    //切换平台
    switchPlatform(orgId,name){
      this.$http.post(logout, {accessToken: this.$store.state.accessToken}).then((response) => {
        // this.setMenuData()
        const userId = this.$store.state.user.userInfo.userId
        this.$store.commit('SET_USER_ID', '')
        this.$store.commit('SET_CURRENT_DATA_SCOPE', '')
        this.$store.commit('SET_TOKEN', '')
        this.$store.commit('SET_ROUTERS', [])
        this.$store.commit('SET_USER_INFO', null)
        this.$store.commit('SET_ADD_ROUTERS', [])
        this.$store.commit('SET_USER_TYPE', '')
        localStorage.setItem(process.env.VUE_APP_ROUTES_KEY, null)
        localStorage.clear()
        this.$store.commit('SET_CURRENT_DATA_SCOPE', orgId)
        this.$store.commit('SET_USER_ID', userId)
        const { $router } = this;
        $router.replace({ name: 'login' });
      }).catch((error) => {
        console.log(new Error(error.message))
      })
    }
  },
  created() {
    this.$http.post(getUserDetail, {userId: this.$store.state.user.userInfo.userId}).then((res) => {
      console.log(res)
      console.log(this.$store.state)
      this.dataScope = res.result.dataScope
      this.currentDataScopeExplain.push(res.result.currentDataScopeExplain)
      this.dataScope.forEach(item =>{
        if(item.dictKey === res.result.currentDataScopeExplain){
          this.platformName = item.dictValue
          this.$emit('getPlatformName', this.platformName);
        }
      })
    }).catch(err =>{
      this.dataScope = []
    })
  }
}
</script>

<style lang="less">
.header_right {
  display: flex;
  &_switch {
    cursor: pointer;
    margin-left: 20px;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      width: 7px;
      height: 7px;
      background-color: transparent;
      border-color: #b9b9b9;
      border-style: solid;
      border-width: 2px 2px 0 0;
      transform: rotate(135deg);
      margin: 3px auto;
      position: relative;
      left: 5px;
    }
  }
}
  .header-avatar{
    display: inline-flex;
    .avatar, .name{
      align-self: center;
    }
    .avatar{
      margin-right: 8px;
    }
    .name{
      font-weight: 500;
    }
  }
  .avatar-menu{
    width: 150px;
  }

</style>
